<template>
  <div>
    <el-main>
      <h1 class="title">个人中心</h1>
      <div class="main">
        <el-form
          ref="formRef"
          :model="ruleForm"
          :rules="rules"
          status-icon
          layout="vertical"
          name="nest-messages"
        >
          <el-form-item prop="name">
            <el-form-item label="用户名称" prop="name"></el-form-item>
            <el-input v-model="ruleForm.username" :disabled="true" />
          </el-form-item>

          <el-form-item>
            <el-form-item label="用户昵称" prop="name"></el-form-item>
            <el-input v-model="ruleForm.nickname" :disabled="fag" />
          </el-form-item>

          <el-form-item>
            <el-form-item label="手机号码" prop="phone"></el-form-item>
            <el-input v-model="ruleForm.phone" :disabled="true" />
          </el-form-item>

          <el-form-item>
            <el-form-item label="登录密码" prop="password"></el-form-item>
            <el-input v-model="ruleForm.password" :disabled="fag" />
          </el-form-item>

          <div>
            <span>用户角色</span>
            <el-form-item prop="role">
              <el-select
                v-model="ruleForm.role"
                placeholder="学员"
                :disabled="true"
              >
                <el-option label="学员" value="shanghai" />
              </el-select>
            </el-form-item>
          </div>

          <div>
            <span>所属学科</span>
            <el-form-item prop="subject">
              <el-select
                v-model="ruleForm.subject"
                placeholder="测试"
                :disabled="fag"
              >
                <el-option label="测试" value="shanghai1" />
                <el-option label="web前端" value="shanghai2" />
                <el-option label="后端" value="shanghai3" />
                <el-option label="ui" value="shanghai4" />
              </el-select>
            </el-form-item>
          </div>

          <div>
            <span>所属班级</span>
            <el-form-item prop="clsaa">
              <el-select
                v-model="ruleForm.class"
                placeholder="请选择班级"
                :disabled="fag"
              >
                <el-option label="java_2023_01" value="shanghai" />
                <el-option label="java_2023_02" value="shanghai2" />
                <el-option label="前端2022" value="shanghai3" />
                <el-option label="前端2023" value="shanghai4" />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item>
            <div>
              <el-button text @click="centerDialogVisible = true">
                预览个人信息
              </el-button>

              <el-dialog
                v-model="centerDialogVisible"
                title="个人信息"
                width="30%"
                align-center
              >
                <el-card class="hover">
                  <div>
                    <img src="../../assets/wd.jpg" alt="" />
                  </div>
                  <div class="card">
                    <p class="name">{{ ruleForm.username }}</p>
                    <div class="rol">学员</div>
                    <p>昵称:{{ ruleForm.nickname }}</p>
                    <p>所属学科:{{ ruleForm.subject }}</p>
                    <p>所属班级:{{ ruleForm.class }}</p>
                    <div class="car-imgs">
                      <div class="tw">
                        <img src="../../assets/wd.jpg" alt="" />
                      </div>
                      <div class="sculpture">
                        <p>{{ ruleForm.phone }}</p>
                        <p>2023-03-07 16:07</p>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-dialog>
            </div>
            <el-button v-if="!show" text @click="reviseInformation()">
              修改个人信息
            </el-button>

            <div v-if="show">
              <el-button type="primary" @click="submitForm(formRef)">
                修改数据
              </el-button>
              <el-button @click="resetForm(formRef)">取消修改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </div>
</template>
  
  <script setup>
import { reactive, ref, onMounted } from "vue";
import { getuserinfo, updateuserinfo } from "../../api/api";
import { GoodStore } from "../../stores/goods";
const centerDialogVisible = ref(false);
const show = ref(false);
const formSize = ref("default");
const formRef = ref();
const ruleForm = reactive({
  username: "",
  nickname: "",
  phone: "",
  password: "",
  role: "",
  subject: "",
  class: "",
});
const fag = ref("true");
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名称!",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号码!",
    },
    // {
    //   pattern: phone,
    //   message: "请输入正确的手机号码",
    // },
  ],
  password: [
    {
      required: true,
      message: "请输入密码!",
    },
    // {
    //   pattern: pwd,
    //   message: "请输入正确的登录密码(6-16的数字+字母)",
    // },
  ],
  subject: [
    {
      required: true,
      message: "请选择学科!",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择班级!",
    },
  ],
});

const reviseInformation = () => {
  //修改个人信息按钮
  show.value = true;
  fag.value = false;
};
const submitForm = async (formRef) => {
  //修改个人数据确定按钮
  const res = await updateuserinfo({
    class: ruleForm.class,
    nickname: ruleForm.nickname,
    password: ruleForm.password,
    phone: ruleForm.phone,
    role: ruleForm.role,
    subject: ruleForm.subject,
    username: ruleForm.username,
  });
  console.log("res", res);
  if (res.code === 200) {
    console.log(res.msg);
    show.value = false;
    fag.value = true;
  }
  getInfo();
};

const resetForm = (formEl) => {
  //取消修改数据按钮
  show.value = false;
  fag.value = true;
  if (!formEl) return;
  formEl.resetFields();
  getInfo();
};

const getInfo = async () => {
  //查询个人数据接口
  //   const token = localStorage.getItem("token");
  //   console.log(token, "token");
  const res = await getuserinfo();
  // console.log("接口", res);
  // console.log("3");
  if (res.code == 200) {
    ruleForm.username = res.result.userInfo.username;
    ruleForm.phone = res.result.userInfo.phone;
    ruleForm.password = res.result.userInfo.password;
    ruleForm.subject = res.result.userInfo.subject;
    ruleForm.class = res.result.userInfo.class;
    ruleForm.role = res.result.userInfo.role;
    ruleForm.nickname = res.result.userInfo.nickname;
    console.log(res, "5555");
  }
};

onMounted(() => {
  getInfo();
});
</script>
  
  <style lang="scss" scoped>
::deep(.el-form-item__content) {
  flex: 0;
  width: 35rem;
}
.title {
  font-size: 2rem;
  color: #f49;
}
.main {
  width: 50rem;
  // font-size: 1.5rem;
}
::deep(.el-select) {
  width: 100%;
  background: red;
}
.hover {
  width: 100%;
  height: 100%;
  margin: 0 auto;

  img {
    width: 100%;
    height: 100%;
  }
  .card {
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.45);
    .name {
      font-weight: 500;
      color: #000;
    }
    .rol {
      width: 3rem;
      font-size: 1rem;
      text-align: center;
      background-color: rgb(238, 68, 68);
      border-radius: 0.3rem;
      color: #fff;
    }
    .car-imgs {
      display: flex;
      align-content: center;
      margin-top: 1rem;

      .tw {
        width: 3rem;
        height: 3rem;
        border-radius: 3rem;
        margin-right: 1rem;
      }
    }
  }
}
</style>